import React, { ReactNode } from 'react'
import style from './style.module.scss'
import { Card } from 'antd'
import { Link } from 'react-router-dom'

interface BaseResultItemProps {
    readonly data: {
        id: string;
        title: string;
        img: string;
    };
    action?: ReactNode[];
    children: ReactNode;
    hover?: boolean;
}

interface BaseResultItemState {

}

export class BaseResultItem extends React.Component<BaseResultItemProps, BaseResultItemState> {
    render () {
        return (
            <Link to={`/race/${this.props.data.id}`} className={style.resultItem}
            >
                <Card hoverable={this.props.hover || true}
                    cover={
                        <img
                            alt={this.props.data.title}
                            src={this.props.data.img}
                        />
                    }
                    actions={this.props.action}
                >
                    {this.props.children}
                </Card>
            </Link>
        )
    }
}
